<template>
    <div class="v-mod" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span> 修改密码</span>
            </div>
            <div class="changePassword">
                <el-form ref="modForm" :model="form" inline-message label-width="120px" class="custom-form">
                    <el-form-item label="原密码" prop="oldPassword" required
                        :rules="[{ required: true, message: '请填写原密码' }]">
                        <el-input style="width:400px" type="password" v-model="form.oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword" required
                        :rules="[{ required: true, message: '请填写新密码' }]">
                        <el-input style="width:400px" type="password" v-model="form.newPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="newPassword2" required :rules="[{ required: true, message: '请填写确认密码' },
                    { validator: checkPassword, message: '两次密码不一致', trigger: 'blur' }]">
                        <el-input style="width:400px" type="password" v-model="form.newPassword2"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="savePassword" class="custom-button">
                            保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>
<style type="text/scss" lang="scss">
.v-mod {
    .changePassword {
        padding: 52px 20px;
        width: 453px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        /* 更高级的字体 */
        margin-left: 200px;
    }

    /* 样式给<label>加框 */
    .custom-form .el-form-item__label {
        display: inline-block;
        border: 1px solid #ccc;
        /* 边框样式 */
        background: #f4f8f9;
        text-align: center;
        border-radius: 5px;
        /* 圆角 */
    }

    .custom-button {
        margin-left: 120px;
        background-color: #5891aa;
        letter-spacing: 3px;
        color: #ffffff;
        font-weight: bold;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .custom-button:hover {
        background-color: #416d7a;
        transform: scale(1.05);
    }

}
</style>
<script>
import api from '@/api'
export default {
    name: "v-mod",
    data() {
        return {
            loading: false,
            form: {
                oldPassword: '',
                newPassword: '',
                newPassword2: ''
            }
        }
    },
    watch: {},
    computed: {},
    methods: {
        savePassword() {

            this.$refs.modForm.validate().then(() => {
                if (this.loading) {
                    return;
                }
                this.loading = true;
                var form = this.form;
                this.$post(api.editorPassword, form).then(res => {
                    this.loading = false;
                    if (res.code == api.code.OK) {
                        this.$message.success('密码修改成功');
                        this.$refs.modForm.resetFields();
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });

            }).catch(() => {

            })


        },
        checkPassword(rule, value, callback) {
            if (value == this.form.newPassword) {
                callback();
                return;
            }
            callback(new Error('两次密码不一致'));
        }
    },
    created() {

    },
    mounted() {
    },
    destroyed() {
    }
}
</script>
